<template>
    <div class="login">
        <div class="d1_bg">
            <div class="register_div">
                <div
                    class="register_aera_div"
                    v-bind:style="register_area_hight"
                >
                    <div class="workflow_div">
                        <div class="workflow_sheet_div">
                            <div class="workflow_sheet">
                                <span :class="{active:sheet_index === 0}">1</span>
                                <p class="workflow_sheet_content workflow_sheet_content_text">
                                    手机验证
                                </p>
                            </div>
                        </div>
                        <div class="workflow_sheet_div">
                            <div class="workflow_sheet">
                                <span :class="{active:sheet_index === 1}">2</span>
                                <p class="workflow_sheet_content workflow_sheet_content_text">
                                    设置个人信息
                                </p>
                            </div>
                        </div>
                        <div class="workflow_sheet_div">
                            <div class="workflow_sheet">
                                <span :class="{active:sheet_index === 2}">3</span>
                                <p class="workflow_sheet_content workflow_sheet_content_text">
                                    注册完成
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="sheet_area_div">
                        <div v-show="sheet_index == 0">
                            <div class="input_list_div">
                                <!--手机号-->
                                <div class="input_div">
                                    <div class="input_border">
                                        <input
                                            autocomplete="true"
                                            placeholder="用户名/手机号"
                                            class="input_class"
                                            v-model="form1_value.username"
                                        />
                                    </div>
                                </div>
                                <!--验证码-->
                                <div class="input_div">
                                    <div
                                        class="input_border"
                                        style="width: 60%;float: left"
                                    >
                                        <input
                                            placeholder="手机验证码"
                                            class="input_class"
                                            v-model="form1_value.msg_code"
                                        />
                                    </div>
                                    <div class="btn_send_msgcode_div">
                                        <button
                                            class="btn_send_msgcode"
                                            @click="btn_get_msgcode"
                                            v-bind:disabled="
                                                disable_msgcode_btn
                                            "
                                        >
                                            {{ btn_get_msgcode_text }}
                                        </button>
                                    </div>
                                </div>
                                <label class="user_agreement_div">
                                    <input
                                        type="checkbox"
                                        class="check_box"
                                        v-model="form1_value.is_agree"
                                    />
                                    <p class="text">
                                        已阅读并同意<a @click="handleOpenDoc(3)">《服务协议》</a>及<a @click="handleOpenDoc(2)">《隐私政策》</a>
                                    </p>
                                </label>
                                <div class="btn_next_01_div">
                                    <button
                                        class="btn_next_01"
                                        @click="btn_to_next"
                                    >
                                        <p class="btn_next_01_text">下一步</p>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div v-show="sheet_index == 1" class="sheet_2_area_div">
                            <div class="input_list_div">
                                <div class="input_div">
                                    <div class="input_border">
                                        <input
                                            placeholder="请输入用户名"
                                            class="input_class"
                                            v-model="form2_value.name"
                                        />
                                    </div>
                                </div>
                                <div class="input_div">
                                    <div class="input_border">
                                        <input
                                            type="password"
                                            placeholder="设置密码（至少6位）"
                                            class="input_class"
                                            v-model="form2_value.password"
                                        />
                                    </div>
                                </div>
                                <div class="input_div">
                                    <div class="input_border">
                                        <input
                                            type="password"
                                            placeholder="确认密码"
                                            class="input_class"
                                            v-model="form2_value.password2"
                                        />
                                    </div>
                                </div>
                                <div class="input_div">
                                    <p>完善以下信息，帮助我们更好的服务您！</p>
                                </div>
                                <div class="input_div">
                                    <div class="input_border">
                                        <select
                                            class="input_class"
                                            v-model="form2_value.sf"
                                        >
                                            <option value="">选择身份</option>
                                            <option value="在职">在职</option>
                                            <option value="学生">学生</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="input_div">
                                    <div class="input_border">
                                        <input
                                                placeholder="出生年月"
                                                class="input_class"
                                                type="date"
                                                v-model="form2_value.csny"
                                        />
                                    </div>
                                </div>
                                <div class="input_div">
                                    <div class="input_border">
                                        <input
                                            placeholder="联系地址"
                                            class="input_class"
                                            v-model="form2_value.address"
                                        />
                                    </div>
                                </div>
                                <div class="input_div" v-if="form2_value.sf == '学生'">
                                    <div class="input_border">
                                        <input
                                            placeholder="学校名称"
                                            class="input_class"
                                            v-model="form2_value.xxname"
                                        />
                                    </div>
                                </div>
                                <div class="input_div" v-if="form2_value.sf == '学生'">
                                    <div class="input_border">
                                        <input
                                            placeholder="专业名称"
                                            class="input_class"
                                            v-model="form2_value.zyname"
                                        />
                                    </div>
                                </div>
                                <div class="input_div" v-if="form2_value.sf == '学生'">
                                    <div class="input_border">
                                        <input
                                            placeholder="入学时间"
                                            class="input_class"
                                            v-model="form2_value.rx_time"
                                        />
                                    </div>
                                </div>
                                <div class="input_div">
                                    <div class="input_border">
                                        <input
                                            placeholder="学历"
                                            class="input_class"
                                            v-model="form2_value.xl"
                                        />
                                    </div>
                                </div>

                                <div class="btn_next_01_div">
                                    <button
                                        class="btn_next_01"
                                        @click="btn_to_finish"
                                    >
                                        <p class="btn_next_01_text">完成注册</p>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div v-show="sheet_index == 2" class="sheet_2_area_div">
                            <div class="input_list_div">
                                <div class="wel_msg_div">
                                    <img
                                        src="../assets/image/icon/register_finish.png"
                                        class="succ_img"
                                    />
                                    <p>
                                        {{ form2_value.username }} {{
                                            welcome_msg
                                        }}
                                    </p>
                                </div>
                                <a @click="loginIn">立即登录</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="copyright-wrap">
            Copyright © CAIXIN, All Rights Reserved. 助力你的财经人生
        </div>
    </div>
</template>
<script>
import axios from 'axios';
import api from '../plugins/common/api';
import aesUtil from '../plugins/common/aesUtil';
// import Base64 from 'js-base64';
export default {
    components: {},
    data() {
        return {
            sheet_index: 0,
            sheet_1_icon: require('../assets/image/icon/wf_icon_g.png'),
            sheet_2_icon: require('../assets/image/icon/wf_icon_g.png'),
            form1_value: {
                username: '',
                msg_code: '',
                is_agree: false
            },
            form2_value: {
                username: null,
                password: null,
                password2: null,
                csny: null,
                name: null,
                sf: '',
                address: null,
                xxname: null,
                zyname: null,
                rx_time: null,
                xl: null
            },
            btn_get_msgcode_text: '获取验证码',
            disable_msgcode_btn: false,
            clockdown_time: 60,
            count: 0,
            register_area_hight: '',
            welcome_msg: ',欢迎加入财鑫网校！'
        };
    },
    watch: {
        sheet_index(newone) {
            if (newone == 1) {
                this.sheet_1_icon = require('../assets/image/icon/wf_icon.png');
            } else if (newone == 2) {
                this.sheet_2_icon = require('../assets/image/icon/wf_icon.png');
            }
        },
        count(newone) {
            if (this.count >= 0 && this.count < this.clockdown_time) {
                this.btn_get_msgcode_text = '已发送(' + newone + ')';
            }
        }
    },
    methods: {
        //下一步按钮
        btn_to_next: function() {
            //检查数据
             if (!this.form1_value.is_agree) {
                 this.$util.alert('需要接受用户协议');
                 return;
             }
             if (!this.form1_value.username == null) {
                 this.$util.alert('手机号不能为空');
                 return;
             }
            if (!this.form1_value.msg_code) {
                this.$util.alert('请填写验证码');
                return;
            }
             axios
                 .post(
                     api.HOSTS['prd.def'] +
                         'pcjk/grzx/doRegister?phone=' +
                         this.form1_value.username +
                         '&yzm=' +
                         this.form1_value.msg_code
                 )
                 .then(res => {
                     if (res.data.code != 200) {
                         this.$util.alert('注册失败：' + res.data.msg);
                     }else{
                         this.sheet_index = 1;
                     }
                 });
        },
        btn_to_finish: function() {
            console.log('按下完成注册按钮');
            //检查数据
            if (
                this.form1_value.username == null ||
                this.form1_value.username == ''
            ) {
                this.$util.alert('手机号不能为空');
            }
            if (
                this.form2_value.password == null ||
                this.form2_value.password2 == null
            ) {
                this.$util.alert('请填写密码');
                return;
            }
            if (this.form2_value.password != this.form2_value.password2) {
                this.$util.alert('两次输入的密码不相同');
                return;
            }
            if (this.form2_value.password.length < 6) {
                this.$util.alert('密码长度必须大于等于6位');
                return;
            }
            let data = Object.assign(this.form2_value, {
                phone: this.form1_value.username,
                password: encodeURIComponent(aesUtil.encrypt(this.form2_value.password))
            });
            this.$api.ajaxData({
                pathName: 'doPerfect',
                method: 'post',
                data: data
            }).then(() =>{
                this.sheet_index = 2;
                this.$util.alert('注册成功');

            });
        },
        //获取验证码按钮
        btn_get_msgcode: function() {
            let host = api.HOSTS['prd.def'];
            if (
                this.form1_value.username == null ||
                this.form1_value.username == ''
            ) {
                this.$util.alert('手机号不能为空');
            }
            axios
                .get(
                    host + 'pcjk/grzx/getYzm?phone=' + this.form1_value.username
                )
                .then(res => {
                    if (res.data.code != 200) {
                        this.$util.alert('获取验证码失败：' + res.data.msg);
                        return;
                    }
                    // this.btn_get_msgcode_text = '已发送';
                    this.disable_msgcode_btn = 'disabled';
                    // 开始倒计时
                    this.count = this.clockdown_time;
                    this.timer = setInterval(() => {
                        if (
                            this.count > 0 &&
                            this.count <= this.clockdown_time
                        ) {
                            this.count--;
                        } else {
                            this.btn_get_msgcode_text = '获取验证码';
                            this.disable_msgcode_btn = 'false';
                            clearInterval(this.timer);
                        }
                    }, 1000);
                });
        },
        loginIn() {
            this.$router.replace({ name: 'login' });
        },
        handleOpenDoc(type){
            this.$util.openDoc(type)
        }
    }
};
</script>
<style scoped lang="scss">
    .copyright-wrap {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 30px 0;
        background: #fff;
        color: #999;
        font-size: 13px;
        text-align: center;
    }
.d1_bg {
    position: absolute;
    top: 80px;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 80px 0;
    min-height: calc(100vh - 80px);
    display: flex;
    justify-content: center;
    background: url('../assets/image/sucai/u585.jpg') no-repeat;
    background-size: 100% 58%;
    overflow: auto;
    box-sizing: border-box;
}
.register_aera_div {
    width: 750px;
    background-color: #ffffff;
    border-radius: 20px;
    padding-bottom: 80px;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
}
.workflow_div {
    display: flex;
    margin: 0 auto;
    height: 70px;
    padding: 0 80px;
    margin-bottom: 25px;
}
.workflow_sheet_div {
    flex: 1;
    height: 70px;
    text-align: center;
}
.workflow_sheet {
    display: flex;
    margin: 25px auto;
    align-items: center;
    justify-content: center;
    span {
        display: block;
        width: 37px;
        height: 37px;
        line-height: 37px;
        border-radius: 50%;
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        background: #ccc;
        &.active {
            background: #69f;
        }
    }
    p {
        width: 120px;
        margin-left: 30px;
        font-size: 12px;
        text-align: left;
    }
}
.sheet_area_div {
    /*background-color: green;*/
    .input_list_div {
        margin: 0 auto;
        padding-bottom: 50px;
        width: 300px;
        background-color: white;
        .input_div {
            /*margin-top: 10px;*/
            width: 300px;
            margin-bottom: 20px;
            color: #666;
            font-size: 13px;
            text-align: center;
            .input_border {
                height: 44px;
                border: 1px solid rgba(153, 153, 153, 1);
                border-radius: 22px;
            }
            .btn_send_msgcode_div {
                float: right;
                height: 44px;
                .btn_send_msgcode {
                    margin: 0 auto;
                    height: 42px;
                    width: 100px;
                    border-radius: 10px;
                    color: rgba(0, 106, 222, 1);
                    border: 1px solid rgba(0, 106, 222, 1);
                    font-size: 13px;
                    background: #fff;
                    outline: none;
                }
            }
            &:after {
                content: '';
                display: block;
                clear: both;
            }
        }
    }
}
.input_class {
    width: 100%;
    height: 42px;
    border: none;
    background: none;
    outline: none;
    padding-left: 22px;
    font-size: 13px;
}
.user_agreement_div {
    .check_box {
    }
    .text {
        display: inline-block;
        padding-right: 20px;
        font-size: 13px;
        color: #999;
    }
}
.btn_next_01_div {
    .btn_next_01 {
        width: 100%;
        height: 44px;
        padding: 0;
        line-height: 44px;
        border-radius: 22px;
        background-color: #006ade;
        outline: none;
        box-sizing: border-box;
        .btn_next_01_text {
            color: white;
        }
    }
}

.sheet_2_area_div {
    .input_list_div {
        margin: 0 auto;
        .wel_msg_div {
            display: flex;
            align-items: center;
            padding-top: 24px;
            p {
                margin-left: 10px;
            }
        }
        a {
            display: block;
            height: 45px;
            width: 100%;
            margin: 30px 0;
            line-height: 45px;
            border-radius: 23px;
            background: #006ade;
            color: #fff;
            text-align: center;
            font-size: 14px;
        }
    }
}
.workflow_sheet_content_text {
    margin-bottom: 0;
}

.succ_img {
    float: left;
}
</style>
